<template>
  <div class="show">
    <div class="showleft">
      <div class="sidebar">
        <p
          v-for="(item, index) in title"
          :key="index"
          :class="{ active: cur == item.to }"
          @click="changeCur(item.to)"
        >
          {{ item.name }}
        </p>
      </div>
    </div>
    <div class="showRight">
      <item :forArr="Hotinfo" v-show="cur == 'Hot'"></item>
      <item :forArr="Foodsinfo" v-show="cur == 'Foods'"></item>
      <item :forArr="SmallFood" v-show="cur == 'SmallFood'"></item>
      <item :forArr="Foreign" v-show="cur == 'Foreign'"></item>
      <item :forArr="Vegetables" v-show="cur == 'Vegetables'"></item>
      <item :forArr="SeaFood" v-show="cur == 'SeaFood'"></item>
      <item :forArr="Vagway" v-show="cur == 'Vagway'"></item>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import item from "./item"
export default {
  components: {item},
  data() {
    return {
      cur: "Hot",
      obj:{},
      Hotinfo: [],
      Foodsinfo: [],
      SmallFood: [],
      Foreign: [],
      Vegetables: [],
      SeaFood: [],
      Vagway: [],
      headImg: "",
      title: [],
      info: [],
    };
  },
  methods: {
    ...mapMutations(["changeCurMenu"]),
    changeCur(item) {
      console.log(item);
      this.cur = item;
    },
  },
  mounted() {
    this.$axios.get("../../static/json/menu.json").then((res) => {
      this.headImg = res.data.allInfo.headImg;
      this.Hotinfo = res.data.allInfo.Hot;
      this.Foodsinfo = res.data.allInfo.Foods;
      this.SmallFood = res.data.allInfo.SmallFood;
      this.Foreign = res.data.allInfo.Foreign;
      this.Vegetables = res.data.allInfo.Vegetables;
      this.SeaFood = res.data.allInfo.SeaFood;
      this.Vagway = res.data.allInfo.Vagway;
      this.title = res.data.allInfo.menuList;
    });
  },
};
</script>

<style scoped lang="less">
.show {
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 2.2rem;
  height: 100vh;
  background: #f5f5f5;
  p {
    height: 42px;
    line-height: 42px;
  }
  .active {
    background: white;
  }
}
.showRight {
  width: 4.6rem;
  height: 100vh;
  margin-left: 10px;
  display: flex;
  justify-content: space-around;
}
.Hot{
 width: 4.6rem;
}


</style>